<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试----底下引用移动端项目</h2>
      <button @click="back">back:返回</button>
      <button @click="forward">forward:前进一步</button>
      <button @click="go">go</button>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <!-- router-link:vue-router提供的全局组件，声明式导航链接，作用是修改K，务必要有to属性 -->
      <router-link to="/home"  class="list-group-item">home</router-link>
      <router-link to="/about" class="list-group-item">about</router-link>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
         <!-- 展示区域将来展示内容取决于K -->
         <!-- 路由组件出口地方:在这展示 -->
         <!-- router-view：也是vue-router提供全局组件，设置路由组件出口位置 -->
         <!-- include:包含,只是缓存Home组件 -->
         <keep-alive :include="['Home']">
              <router-view></router-view>
         </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  methods:{
    back(){
      //返回按钮
      this.$router.back();
    }
    ,
    forward(){
      //前进按钮
      this.$router.forward();
    },
    go(){
      this.$router.go(-2);
    }
  }
};
</script>

<style scoped>
 .router-link-active{
   background: red !important;
 }
</style>
